<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>颜锦晖的简书</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="css/index.css">
    <meta name="description" content="简书是一个优质的创作社区，在这里，你可以任性地创作，一篇短文、一张照片、一首诗、一幅画……我们相
    信，每个人都是生活中的艺术家，有着无穷的创造力。">
    <meta name="keywords" content="简书,简书官网,图文编辑软件,简书下载,图文创作,创作软件,原创社区,小说,散文,写作,阅读">
</head>
<body>
    <!--头部-->
    <nav id="nav">
        <div class="nav-content">
            <!--左边-->
            <div class="nav-content-l">
                <a href="#">
                    <img src="images/js_logo.png" alt="">
                </a>
            </div>
            <!--中间内容-->
            <div class="nav-content-c">
                <ul>
                    <li><a href=""><img src="images/find_icon.png" alt="">发现</a></li>
                    <li><a href=""><img src="images/book_icon.png" alt="">关注</a></li>
                    <li><a href=""><img src="images/ld_icon.png" alt="">消息</a></li>
                    <li class="search-input">
                        <input type="text" value="搜索">
                        <img  class="search-icon" src="images/fd_icon.png" alt="" >
                    </li>
                </ul>
            </div>
            <!--右边-->
            <div class="nav-content-r">
                <img src="images/jsa_icon.png" alt="" class="jsa-btn">
                <img src="images/touxiang_img.png" alt="" class="head-btn">
                <a href="" class="write-btn">
                    <img src="images/write_icon.png" alt="">
                    写文章
                </a>
            </div>

        </div>
    </nav>
    <!--主体内容-->
    <section id="main">
        <!--主体的左边-->
        <div class="main-left">
            <!--焦点图-->
            <div class="main-left-top">
                <img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=544445506,1905288398&fm=26&gp=0.jpg" alt="">
            </div>
            <!--投稿-->
            <div class="main-left-center">
                <a href="javascript:;"><img src="images/1.jpg" alt="">故事</a>
                <a href="javascript:;"><img src="images/2.jpg" alt="">读书</a>
                <a href="javascript:;"><img src="images/3.jpg" alt="">摄影</a>
                <a href="javascript:;"><img src="images/4.jpg" alt="">互联网</a>
                <a href="javascript:;"><img src="images/1.jpg" alt="">故事</a>
                <a href="javascript:;"><img src="images/3.jpg" alt="">读书</a>
                <a href="javascript:;"><img src="images/2.jpg" alt="">摄影</a>
                <a href="javascript:;"><img src="images/4.jpg" alt="">互联网</a>
                <a href="javascript:;">更多热门专题&nbsp;&gt;</a>
            </div>
            <!--文章列表-->
            <div class="main-left-cell">
                <div class="cell">
                    <dl>
                        <dt>
                            <img src="images/cell_img.jpg" alt="">
                        </dt>
                        <dd>
                            <h3>今天也是学习前端的一天啊啊啊</h3>
                            <p>今天也是学习呆宿舍无语吃饭睡觉学习，打扰，我们终将是要学会独自成长，如果有一天 我们都
                            陈飞宇和我抢赵露思，争风吃醋</p>
                            <a href="#">
                                <span>颜锦晖想谈恋爱</span>
                            </a>
                            <a href="#">
                                <img src="images/comment_icon.png" alt="">
                                <span>68</span>
                            </a>
                            <a href="#">
                                <img src="images/like_icon.png" alt="">
                                <span>83</span>
                            </a>
                        </dd>
                    </dl>
                </div>
                <div class="cell">
                    <dl>
                        <dt>
                            <img src="images/cell_img.jpg" alt="">
                        </dt>
                        <dd>
                            <h3>今天也是学习前端的一天啊啊啊</h3>
                            <p>今天也是学习呆宿舍无语吃饭睡觉学习，打扰，我们终将是要学会独自成长，如果有一天 我们都
                                陈飞宇和我抢赵露思，争风吃醋</p>
                            <a href="#">
                                <span>颜锦晖想谈恋爱</span>
                            </a>
                            <a href="#">
                                <img src="images/comment_icon.png" alt="">
                                <span>68</span>
                            </a>
                            <a href="#">
                                <img src="images/like_icon.png" alt="">
                                <span>83</span>
                            </a>
                        </dd>
                    </dl>
                </div>
            </div>
        </div>
        <!--主体的右边-->
        <div class="main-right">
            <!--第一部分-->
            <div class="main-right-top">
                <a href="#"><img src="images/jf01.png" alt=""></a>
                <a href="#"><img src="images/jf02.png" alt=""></a>
                <a href="#"><img src="images/jf03.png" alt=""></a>
                <a href="#"><img src="images/jf04.png" alt=""></a>
                <a href="#"><img src="images/jf05.png" alt=""></a>
            </div>
            <!--第二部分-->
            <div class="main-right-center">
                <dl>
                    <dt>
                        <img src="images/itlike.png" alt="">
                    </dt>
                    <dd>
                        <p>下载简书手机App</p>
                        <p>随时随地发现和创作内容</p>
                    </dd>
                </dl>
            </div>
            <!--第三部分-->
            <div class="main-right-bottom">
                <div class="main-right-bottom-head">
                   <span>推荐作者</span>
                    <span><a href="#">换一批</a></span>
                </div>
                <ul>
                    <li>
                        <a  class="author-icon" href="#"><img src="https://files.catbox.moe/r0gaiv.jpg" alt=""></a>
                        <div>
                            <a href="#" class="title">颜颜颜颜颜颜</a>
                            <p>还有人比他更帅么？</p>
                        </div>

                        <a href="#" class="focus">+关注</a>
                    </li>

                    <li>
                        <a  class="author-icon" href="#"><img src="images/author1.webp" alt=""></a>
                        <div>
                            <a href="#" class="title">王老师八卦美术史</a>
                            <p>鸡老师 发生甚么事了</p>
                        </div>

                        <a href="#" class="focus">+关注</a>
                    </li>

                    <li>
                        <a  class="author-icon" href="#"><img src="images/author2.webp" alt=""></a>
                        <div>
                            <a href="#" class="title">灰灰灰灰灰晖</a>
                            <p>帅哥永远滴神</p>
                        </div>

                        <a href="#" class="focus">+关注</a>
                    </li>

                    <li>
                        <a  class="author-icon" href="#"><img src="images/author3.webp" alt=""></a>
                        <div>
                            <a href="#" class="title">锦锦锦锦锦</a>
                            <p>没有比他更帅的了</p>
                        </div>

                        <a href="#" class="focus">+关注</a>
                    </li>

                    <li>
                        <a  class="author-icon" href="#"><img src="images/author4.webp" alt=""></a>
                        <div>
                            <a href="#" class="title">颜啊颜啊啊</a>
                            <p>啦啦啦啦啦</p>
                        </div>

                        <a href="#" class="focus">+关注</a>
                    </li>
                </ul>
                <a href="" class="main-right-bottom-footer">
                    查看全部
                </a>
            </div>
        </div>

    </section>
</body>
</html>